<template>
  <div class="app-container">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="postForm"
      label-position="right"
      label-width="100px"
      style="width: 400px; margin-left:50px;"
    >
      <el-form-item label="账号" prop="username">
        <el-input v-model="postForm.username" clearable placeholder="账号" maxlength="20" />
      </el-form-item>
      <el-form-item label="姓名" prop="realName">
        <el-input v-model="postForm.realName" placeholder="姓名" maxlength="10" />
      </el-form-item>
      <el-form-item label="身份证号" prop="idcard">
        <el-input v-model="postForm.idcard" placeholder="身份证号" maxlength="20" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="postForm.mobile" placeholder="手机号" maxlength="11" />
      </el-form-item>
      <el-form-item label="角色" prop="roleIdArray" :disabled="false">
        <el-select
          v-model="postForm.roleIdArray"
          multiple
          filterable
          placeholder="请选择"
          style="width: 100%;"
          @change="selectChange"
        >
          <el-option
            v-for="item in listSysRoles"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="back()">返回</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addSysUser, updateSysUser, getSysUser } from '@/api/sys/user'
import { listSysRoleCombo } from '@/api/common/common'
import msgUtil from '@/utils/msgUtil'
import routerUtil from '@/utils/routerUtil'

const defaultForm = {
  id: null,
  username: null,
  realName: null,
  idcard: null,
  mobile: null,
  roleIds: null,
  roleIdArray: null

}
export default {
  name: 'SysUserDetail',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      postForm: Object.assign({}, defaultForm),
      listSysRoles: [],
      systemOptions: [],
      oldRoleCode: null,
      authSystemId: null,
      rules: {
        username: [
          { required: true, trigger: 'blur' },
          { min: 1, max: 20, trigger: 'change' }
        ],
        realname: [{ required: true, trigger: 'blur' },
          { min: 1, max: 10, trigger: 'change' }
        ],
        mobile: [{ required: true, trigger: 'blur' },
          { min: 1, max: 11, trigger: 'change' }
        ]
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created() {
    this.getSysRoles()
    if (this.isEdit) {
      this.getSysUser(this.$route.query.id)
    } else {
      this.loading = false
    }
  },
  methods: {
    // 获取所有角色列表
    async getSysRoles() {
      await listSysRoleCombo({}).then(response => {
        this.listSysRoles = response.data
      })
    },
    // 修改用户
    updateSysUser() {
      this.postForm.roleIds = this.postForm.roleIdArray.join('@')
      updateSysUser(this.postForm).then(response => {
        msgUtil.success()
        routerUtil.backPath(this, '/sys/user/index')
      })
    },
    // 新增用户
    addSysUser() {
      this.postForm.roleIds = this.postForm.roleIdArray.join('@')
      addSysUser(this.postForm).then(response => {
        msgUtil.success()
        routerUtil.backPath(this, '/sys/user/index')
      })
    },
    // 返回
    back() {
      routerUtil.backPath(this, '/sys/user/index')
    },
    // 提交form
    submitForm() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          if (this.isEdit) {
            this.updateSysUser()
          } else {
            this.addSysUser()
          }
        }
      })
    },
    // 获取角色信息并赋值给当前页面
    async getSysUser(id) {
      var json = { 'id': id }
      await getSysUser(json).then(response => {
        this.postForm = response.data
        const roleIds = response.data.roleIds
        const roleIdArray = []
        if (roleIds) {
          roleIds.split('@').forEach(roleId => {
            if (roleId !== '') {
              roleIdArray.push(parseInt(roleId))
            }
          })
        }
        this.postForm.roleIdArray = roleIdArray
        this.postForm.roleIds = ''
      })
    },
    selectChange() {
      this.$forceUpdate()
    }
  }
}
</script>
<style scoped>

</style>
